<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="mall_dialog"
    top="5vh"
  >
    <div slot="title" class="title_close">
      <!-- 行情商城 -->
      <div class="title">
        {{ $t("account_dialog.market_mall.57km7fvk87k0") }}
      </div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hide" />
    </div>
    <!-- 当前行情市场切换 -->
    <div class="changeMarket">
      <ul class="mall_list">
        <li
          class="mall_li"
          @click="changeMarket(index)"
          v-for="(item, index) in marketList"
          :key="index"
        >
          <img class="icon_type" :src="item.marketIcon" alt="" />
          <span :class="active == index ? 'on' : ''">{{
            item.marketName
          }}</span>
        </li>
      </ul>
    </div>
    <!-- 深度行情 -->
    <div class="mall_quo">
      <div class="mall_title">
        <div class="mall_title_cn">
          <span>{{ $t("account_dialog.market_mall.57km7fvk9zk0") }}</span>
        </div>
        <span class="mall_title_en">{{ "Deep market" }}</span>
      </div>
      <div class="mall_buy">
        <!-- L2高级报价数据 -->
        <div class="mall_name" v-if="accountType == 2 || accountType == 1">
          {{ $t("account_dialog.market_mall.57km7fqweaqo0") }}
        </div>
        <!-- L1深度报价数据 -->
        <div class="mall_name" v-if="accountType == 3">
          {{ $t("account_dialog.market_mall.57km7fwrdqo02") }}
        </div>
        <ul class="mall_buy_list">
          <li
            class="mall_buy_li"
            v-for="(item, index) in MallList"
            :key="index"
          >
            <div class="mall_buy_title">
              <span>{{ item.title }}</span
              ><span>{{ ` ${item.day}${$t("m.Day")}` }}</span>
            </div>
            <div class="mall_buy_btn">
              <span>{{ item.current }}</span
              ><span>{{ ` ${item.price}` }}</span>
              <button
                @click="buyClick(item, index)"
                class="small-btn"
              >
                {{ $t("account_dialog.market_mall.57km7fvkaa80") }}
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 功能权限 -->
    <div
      class="introduction_list"
      v-for="(item, index) in introduction"
      :key="index"
    >
      <!-- 标题 -->
      <div class="mall_title">
        <div class="mall_title_cn">
          <span v-if="lang == 'en'">{{ item.title_en }}</span>
          <span v-else>{{ item.title_zh }}</span>
        </div>
        <span class="mall_title_en">
          <i v-if="lang == 'en'">{{ item.title_zh }}</i>
          <i v-else>{{ item.title_en }}</i>
        </span>
      </div>
      <!-- suntitile -->
      <h2 class="sun_titile" v-if="lang == 'en'">{{ item.suntitile_en }}</h2>
      <h2 class="sun_titile">{{ item.suntitile_zh }}</h2>
      <!-- 图片 -->
      <div class="introduction_img" v-if="item.photo_zh && item.photo_en">
        <img v-if="lang == 'en'" :src="item.photo_en" alt="" />
        <img v-else :src="item.photo_zh" alt="" />
      </div>
      <!-- 提示 -->
      <div class="introduction_tip" v-if="item.remarks_zh && item.remarks_en">
        <div
          class="introduction_content"
          v-if="lang == 'en'"
          v-html="item.remarks_en"
        ></div>
        <div class="introduction_content" v-else v-html="item.remarks_zh"></div>
      </div>
    </div>
    <div class="buy_record">
      * {{ $t("account_dialog.market_mall.57km7fvkaiw0") }}
      <!-- 购买记录 -->
      <span @click="showRecord">{{
        $t("account_dialog.market_mall.57km7fvkaqo0")
      }}</span>
    </div>
    <marketRecord
      ref="marketRecord"
      :isRecord="isRecord"
      @hideRecord="hideRecord"
    ></marketRecord>
    <!-- 行情卡购买对话框 -->
    <buyQuoDialog
      :showBuy="showBuy"
      @hideBuy="hideBuy"
      :buyObj="buyObj"
      :asset="asset"
    ></buyQuoDialog>
  </el-dialog>
</template>

<script>
import buyQuoDialog from "./buy_quo_dialog.vue";
import marketRecord from "./market_record.vue";
import { get_securities} from "@/assets/js/API/order.js";
import { get_quotation_shop } from "@/assets/js/API/active.js";
export default {
  components: {
    buyQuoDialog,
    marketRecord,
  },
  props: {
    show: Boolean,
  },
  data() {
    return {
      lang: "",
      marketList: [
        {
          // 港股
          marketName: this.$t("account_dialog.account_up.56hqvuz2imk0"),
          marketIcon: require("@/assets/img/image_HKD.png"),
        },
        {
          // 美股
          marketName: this.$t("account_dialog.account_up.56hqvuz2iuo0"),
          marketIcon: require("@/assets/img/image_usd.png"),
        },
        {
          // 沪深
          marketName: this.$t("account_dialog.market_mall.57km7fvkaz40"),
          marketIcon: require("@/assets/img/image_hs.png"),
        },
      ], // 市场列表
      MallList: [], // 购买商品列表
      introduction: [], // 市场功能介绍列表
      active: 0, // 当前点击列表
      showBuy: false, // 购买对话框
      buyObj: {}, // 购买对象
      asset: {}, // 资金账户
      isRecord: false, // 是否展示购买记录对话框
    };
  },
  computed: {
    accountType() {
      return this.$store.state.index.accountType;
    },
  },
  watch: {
    // accountType(val) {
    //   this.initCharge(val);
    // },
  },
  created() {
    this.lang = localStorage.getItem("lang");
  },
  mounted() {},
  methods: {
    // 关闭升级账户接口
    hide() {
      this.$emit("close", "mallShow");
    },
    // 初始化默认股票市场
    initCharge(val) {
      // 1: A股通, 2：港股，3：美股
      let type;
      if (val == 1) {
        type = "CN";
        this.active = 2;
      } else if (val == 2) {
        type = "HK";
        this.active = 0;
      } else {
        type = "US";
        this.active = 1;
      }
      this.quotationShop(type);
    },
    // 切换市场
    changeMarket(val) {
      // 1: A股通, 2：港股，3：美股
      let type;
      if (val == 0) type = "HK";
      else if (val == 1) type = "US";
      else type = "CN";
      this.active = val;
      this.quotationShop(type);
    },
    // 获取商城列表数据
    async quotationShop(type) {
      const res = await get_quotation_shop({
        type: type,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      this.MallList = res.data.list;
      this.introduction = res.data.introduction;
    },
    // 打开购买行情卡对话框
    async buyClick(val) {
      let type;
      // 0： 港股，type= 2, 1：美股，type= 3, 2：沪深, type= 1,
      if (this.active == 0) type = 2;
      else if (this.active == 1) type = 3;
      else type = 1;
      await this.getSecuritiesAccount(type);
      this.showBuy = true;
      this.buyObj = val;
    },
    hideBuy() {
      this.showBuy = false;
    },
    showRecord() {
      this.isRecord = true;
      this.$refs.marketRecord.shopRecords({
        accountType: "", //1:A股通 2:港股 3:美股 不传即所有
        startDate: "",
        endDate: "",
        type: "", // 1: 使用中，2：已过期。不传即所有
      });
    },
    hideRecord() {
      this.isRecord = false;
    },
    // 得到当前账户资金
    async getSecuritiesAccount(type) {
      const res = await get_securities({
        type: type,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      console.log(res.data.asset,"res.data.asset")
      this.asset = res.data.asset;
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/common.less";
.mall_dialog {
  i {
    font-style: initial;
  }
  .el-dialog__body {
    height: 790px;
    overflow: auto;
    padding: 0 !important;
  }
  .changeMarket {
    padding: 20px 31px 40px 31px;
    .mall_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mall_li {
        cursor: pointer;
        .icon_type {
          height: 30px;
        }
        span {
          margin-left: 10px;
          color: @fbSix;
          font-size: 12px;
        }
        .on {
          color: @hoverColor;
        }
      }
    }
  }
  .mall_title {
    display: flex;
    align-items: center;
    .mall_title_cn {
      background-image: url(~@/assets/img/1.png);
      background-size: 161px 35px;
      width: 161px;
      height: 35px;
      color: @Dark_img;
      font-size: 14px;
      line-height: 35px;
      span {
        margin-left: 30px;
      }
    }
    .mall_title_en {
      font-size: 14px;
      color: @DarkYellow;
    }
  }
  .mall_quo {
    .mall_buy {
      .mall_name {
        padding: 30px 0 10px 30px;
        color: @fbSix;
        font-size: 12px;
      }
      .mall_buy_list {
        padding-left: 30px;
        .mall_buy_li {
          width: 440px;
          height: 35px;
          border-radius: 4px;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: @fff;
          font-size: 12px;
          &:nth-child(3n-2) {
            background: linear-gradient(90deg, #1856d7, #71aafb);
            .small-btn {
              background-color: @btn_blue;
            }
          }
          &:nth-child(3n-1) {
            background: linear-gradient(90deg, #f6c931, #ffe37d);
            .small-btn {
              background-color: @btn_yellow;
            }
          }
          &:nth-child(3n) {
            background: linear-gradient(90deg, #9932f6, #e286f9);
            .small-btn {
              background-color: @btn_violet;
            }
          }
          .mall_buy_title {
            padding-left: 30px;
          }
          .mall_buy_btn {
            padding-right: 30px;
            .small-btn {
              width: 60px;
              height: 25px;
              border: 1px solid transparent;
              border-radius: 4px;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  .introduction_list {
    margin-top: 40px;
    .introduction_img {
      img {
        width: 440px;
      }
      margin: 30px;
    }
    .sun_titile {
      padding-left: 30px;
      font-size: 12px;
      color: @DarkYellow;
    }
    .introduction_tip {
      padding: 0 30px;
      .introduction_content {
        font-size: 12px;
        color: @fbSix;
        white-space: pre-wrap;
      }
    }
  }
}
.buy_record {
  padding-left: 30px;
  color: @fbSix;
  font-size: 12px;
  span {
    color: @hoverColor;
    cursor: pointer;
  }
}
</style>